<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <style>

        #treeViewContainer {
            pointer-events: all;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.2);
            color: black;
            top: 80px;
            z-index: 200000;
            float: left;
            left: 0;
            padding-left: 10px;
            font-family: 'Roboto', sans-serif;
            font-size: 15px;
            user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            width: 350px;
        }

        #treeViewContainer ul {
            list-style: none;
            padding-left: 1.75em;
            pointer-events: none;
        }

        #treeViewContainer ul li {
            position: relative;
            width: 500px;
            pointer-events: none;
            padding-top: 3px;
            padding-bottom: 3px;
            vertical-align: middle;
        }

        #treeViewContainer ul li a {
            background-color: #eee;
            border-radius: 50%;
            color: #000;
            display: inline-block;
            height: 1.5em;
            left: -1.5em;
            position: absolute;
            text-align: center;
            text-decoration: none;
            width: 1.5em;
            pointer-events: all;
        }

        #treeViewContainer ul li a.plus {
            background-color: #ded;
            pointer-events: all;
        }

        #treeViewContainer ul li a.minus {
            background-color: #eee;
            pointer-events: all;
        }

        #treeViewContainer ul li a:active {
            top: 1px;
            pointer-events: all;
        }

        #treeViewContainer ul li span:hover {
            color: white;
            cursor: pointer;
            background: black;
            padding-left: 2px;
            pointer-events: all;
        }

        #treeViewContainer ul li span {
            display: inline-block;
            width: calc(100% - 50px);
            padding-left: 2px;
            pointer-events: all;
            height: 23px;
        }

        #treeViewContainer .highlighted-node { /* Appearance of node highlighted with TreeViewPlugin#showNode() */
            border: black solid 1px;
            background: yellow;
            color: black;
            padding-left: 1px;
            padding-right: 5px;
            pointer-events: all;
        }

    </style>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div id="treeViewContainer"></div>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/scene_graph_icon.png"/>
    <h1>Scene Graph</h1>
    <h2>Building a simple scene graph with metadata</h2>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/metadata/MetaScene.js~MetaScene.html"
               target="_other">MetaScene</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/nodes/Node.js~Node.html"
               target="_other">Node</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/mesh/Mesh.js~Mesh.html"
               target="_other">Mesh</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/PhongMaterial.js~PhongMaterial.html"
               target="_other">PhongMaterial</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/geometry/ReadableGeometry.js~ReadableGeometry.html"
               target="_other">ReadableGeometry</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/TreeViewPlugin/TreeViewPlugin.js~TreeViewPlugin.html"
               target="_other">TreeViewPlugin</a>
        </li>

    </ul>
</div>
</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        Viewer,
        Mesh,
        Node,
        PhongMaterial,
        buildBoxGeometry,
        ReadableGeometry,
        TreeViewPlugin
    } from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    viewer.cameraFlight.fitFOV = 35;

    viewer.scene.highlightMaterial.edgeColor = [0, 0, 0];

    //------------------------------------------------------------------------------------------------------------------
    // Create a metadata structure tree view
    //------------------------------------------------------------------------------------------------------------------

    const treeView = new TreeViewPlugin(viewer, {
        containerElement: document.getElementById("treeViewContainer"),
        autoExpandDepth: 1 // Initially expand root node
    });

    //------------------------------------------------------------------------------------------------------------------
    // Build a simple scene graph representing a table with four legs
    //------------------------------------------------------------------------------------------------------------------

    const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
        xSize: 1,
        ySize: 1,
        zSize: 1
    }));

    new Node(viewer.scene, {
        id: "furniture",
        isModel: true, // <------------------------------ Node represents a model

        children: [
            new Node(viewer.scene, { // Anonymous transform group

                rotation: [0, 50, 0],
                position: [0, 0, 0],
                scale: [1, 1, 1],

                children: [

                    new Mesh(viewer.scene, { // Red table leg
                        id: "redLeg",
                        isObject: true, // <---------- Node represents an object

                        position: [-4, -6, -4],
                        scale: [1, 3, 1],
                        rotation: [0, 0, 0],
                        geometry: boxGeometry,
                        material: new PhongMaterial(viewer.scene, {
                            diffuse: [1, 0.3, 0.3]
                        })
                    }),

                    new Mesh(viewer.scene, { // Green table leg
                        id: "greenLeg",
                        isObject: true, // <---------- Node represents an object

                        position: [4, -6, -4],
                        scale: [1, 3, 1],
                        rotation: [0, 0, 0],
                        geometry: boxGeometry,
                        material: new PhongMaterial(viewer.scene, {
                            diffuse: [0.3, 1.0, 0.3]
                        })
                    }),

                    new Mesh(viewer.scene, {// Blue table leg
                        id: "blueLeg",
                        isObject: true, // <---------- Node represents an object

                        position: [4, -6, 4],
                        scale: [1, 3, 1],
                        rotation: [0, 0, 0],
                        geometry: boxGeometry,
                        material: new PhongMaterial(viewer.scene, {
                            diffuse: [0.3, 0.3, 1.0]
                        })
                    }),

                    new Mesh(viewer.scene, {  // Yellow table leg
                        id: "yellowLeg",
                        isObject: true, // <---------- Node represents an object

                        position: [-4, -6, 4],
                        scale: [1, 3, 1],
                        rotation: [0, 0, 0],
                        geometry: boxGeometry,
                        material: new PhongMaterial(viewer.scene, {
                            diffuse: [1.0, 1.0, 0.0]
                        })
                    }),

                    new Mesh(viewer.scene, { // Purple table top
                        id: "tableTop",
                        isObject: true, // <---------- Node represents an object

                        position: [0, -3, 0],
                        scale: [6, 0.5, 6],
                        rotation: [0, 0, 0],
                        geometry: boxGeometry,
                        material: new PhongMaterial(viewer.scene, {
                            diffuse: [1.0, 0.3, 1.0]
                        })
                    })
                ]
            })
        ]
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create some metadata for our model
    //------------------------------------------------------------------------------------------------------------------

    viewer.metaScene                            // This is the MetaScene for the Viewer
        .createMetaModel("furniture", {         // Creates a MetaModel in the MetaScene
            "projectId": "myTableProject",
            "revisionId": "V1.0",
            "metaObjects": [
                {
                    "id": "table",              // ID does not match any Entity
                    "name": "Table",
                    "type": "furniture",        // Arbitrary type, could be IFC type
                    "attributes": {             // Element attributes, could be IfcPropertySet
                        "cost": "200"
                    }
                },
                {
                    "id": "redLeg",             // ID matches Node
                    "name": "Red table Leg",
                    "type": "leg",
                    "parent": "table",          // References first MetaObject as parent
                    "attributes": {
                        "material": "wood"
                    }
                },
                {
                    "id": "greenLeg",
                    "name": "Green table leg",
                    "type": "leg",
                    "parent": "table",
                    "attributes": {
                        "material": "wood"
                    }
                },
                {
                    "id": "blueLeg",
                    "name": "Blue table leg",
                    "type": "leg",
                    "parent": "table",
                    "attributes": {
                        "material": "wood"
                    }
                },
                {
                    "id": "yellowLeg",
                    "name": "Yellow table leg",
                    "type": "leg",
                    "parent": "table",
                    "attributes": {
                        "material": "wood"
                    }
                },
                {
                    "id": "tableTop",
                    "name": "Purple table top",
                    "type": "surface",
                    "parent": "table",
                    "attributes": {
                        "material": "formica",
                        "width": "60",
                        "depth": "60",
                        "thickness": "5"
                    }
                }
            ]
        });

    //------------------------------------------------------------------------------------------------------------------
    // Add model to our TreeViewPlugin
    //------------------------------------------------------------------------------------------------------------------

    treeView.addModel("furniture");

    //------------------------------------------------------------------------------------------------------------------
    // Find scene graph nodes by their model and object IDs
    //------------------------------------------------------------------------------------------------------------------

    // Get the whole table model
    var tableModel = viewer.scene.models["furniture"];

    tableModel.edges = true;

    // Get some leg objects
    var redLegObject = viewer.scene.objects["redLeg"];
    var greenLegObject = viewer.scene.objects["greenLeg"];
    var blueLegObject = viewer.scene.objects["blueLeg"];

</script>
</html>